<template>
  <n-modal
      title="标题"
      :preset="'dialog'"
      @positive-click="onSubmit"
      style="width: 800px"
      @after-leave="closeAfter"
  >
    <n-form
        ref="modalFormRef"
        :model="modalForm"
        :inline="false"
        >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="上级菜单" path="parentId">
          <n-tree-select v-model:value="modalForm.parentId"
                         :default-value="0"
                         :options="menuDict"
                         key-field="id"
                         label-field="menuName"
                         :show-path="true"
                         placeholder="不选择时，默认顶级菜单"
                         clearable
                         @update:value="updateParent"
                         default-expand-all/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="菜单名称" path="menuName">
          <n-input v-model:value="modalForm.menuName" clearable placeholder="请输入菜单名称"/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="显示顺序" path="sort">
          <n-input-number v-model:value="modalForm.sort" clearable placeholder="请输入显示顺序" style="width: 100%"/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="菜单代码" path="menuCode">
          <n-input v-model:value="modalForm.menuCode" disabled clearable placeholder="请输入菜单代码"/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="菜单简码" path="shortCode">
          <n-input v-model:value="modalForm.shortCode" clearable placeholder="请输入菜单简码"/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="菜单图标" :path="['M', 'C'].includes(modalForm.menuType) ? 'icon' : ''">
          <n-input v-model:value="modalForm.icon" clearable placeholder="请输入菜单图标"/>
        </n-form-item-gi>
        <n-form-item-gi :span="6" label="菜单状态" path="status">
          <n-radio-group v-model:value="modalForm.status" name="radioGroup2" size="small">
            <n-radio-button v-for="(item, index) in statusDict" :key="index" :value="item.value">
              {{ item.label }}
            </n-radio-button>
          </n-radio-group>
        </n-form-item-gi>
        <n-form-item-gi :span="6" label="菜单类型" path="menuType">
          <n-radio-group v-model:value="modalForm.menuType" name="radioGroup2" size="small">
            <n-radio-button v-for="(item, index) in menuTypeDict" :key="index" :value="item.dictCode">
              {{ item.dictName }}
            </n-radio-button>
          </n-radio-group>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="组件路径" path="component">
          <n-input v-model:value="modalForm.component" clearable placeholder="请输入组件路径"/>
        </n-form-item-gi>
        <n-form-item-gi :span="6" label="是否隐藏" path="status">
          <n-radio-group v-model:value="modalForm.hidden" name="radioGroup2" size="small">
            <n-radio-button :key="0" :value="0">
              否
            </n-radio-button>
            <n-radio-button :key="1" :value="1">
              是
            </n-radio-button>
          </n-radio-group>
        </n-form-item-gi>

<!--        <n-form-item-gi :span="12" label="访问路径" path="url">
          <n-input v-model:value="modalForm.url" clearable placeholder="请输入访问路径"/>
        </n-form-item-gi>-->
      </n-grid>
    </n-form>
  </n-modal>
</template>
<script setup >

import {ref} from "vue";
import {addDictType, getDictByTypeCode} from "@/api/system/dictApi";
import {addMenu, getParentMenu} from "@/api/system/menuApi";


const modalFormRef = ref()
const menuDict = ref([
      {
        id:0,
        menuCode:'',
        menuName:"主目录"
      }
]
)
const menuTypeDict = ref([
      {
        dictCode:"M",
        dictName:"目录"
      },
      {
        dictCode:"C",
        dictName:"菜单"
      }
]
)
const statusDict = [
      {
        value:1,
        label:"启用"
      },
      {
        value:2,
        label:"停用"
      }
]
const defFrom = {
  parentId:0,
  menuName:"",
  sort: undefined,
  icon: "",
  menuType:'',
  url:"",
  menuCode:"",
  shortCode:"",
  component:"",
  status:1,
  hidden:0,
}
const modalForm = ref({...defFrom})
onMounted(()=>{
  loadMenuType()
  loadParentMenu()
})
function getInfo(){

}
// 加载数据字典
function loadMenuType(){
  getDictByTypeCode("sys.menu.type").then(res=>{
    menuTypeDict.value = res.data;
    if (res.data && res.data.length > 0){
      modalForm.value.menuType = res.data[0].dictCode
    }
  })
}
// 查询上级菜单
function loadParentMenu(){
  getParentMenu().then(res=>{
    let menu = {
      id:0,
      menuCode:'',
      menuName:"主目录"
    }
    let data = res.data;
    if (res.data&& res.data.length > 0){
      data = data.map(d=>{
           if (!d.children || d.children.length <= 0){
             delete d.children
           }
           return d;
        })
    }
    menuDict.value = res.data&& res.data.length > 0 ? [menu,...data] : [menu];
  })
}
const selectParent = ref({
  id:0,
  menuCode:'',
  menuName:"主目录"
})
// 切换父节点方法
function updateParent(val,item){
  selectParent.value = item
}
watch(()=>modalForm.value.shortCode,(val)=>{
  let end = val ? selectParent.value.menuCode ? `-${val}`: val : ''
  modalForm.value.menuCode = selectParent.value.menuCode + end
})
watch(selectParent,(val)=>{
  let end = modalForm.value.shortCode ? val?.menuCode ? `-${modalForm.value.shortCode}`:modalForm.value.shortCode : ''
  modalForm.value.menuCode = val?.menuCode + end
})
const emit = defineEmits(['flushedTable','close'])
function onSubmit(){
  modalFormRef.value?.validate((errors) => {
    if (!errors) {
      addMenu(modalForm.value).then(res=>{
        emit('close')
        emit('flushedTable')
      })
    } else {
      console.log(errors)
      // dataUtil.message.error('验证成功')
      naive.message.error("dddd")
    }
  })
  return false
}
function closeAfter(){
  modalForm.value = {...defFrom}
}

</script>
